<template>
    <label class="el-checkbox-button el-checkbox-button--medium" :class="{'is-checked': isChecked(label)}">
    	<input
    	type="checkbox"
        v-model="inputCheckbox"
        :name="name"
        @change="handleChange"
        @focus="focus=true"
        @blur="focus=false" />
      <span class="el-checkbox-button__inner">
        <slot>{{label}}</slot>
      </span>  
	</label>
</template>

<script>
export default {
  name: 'CheckboxButton',
  data() {
    return {
      inputCheckbox: false
    }
  },
  props: {
    value: {},
    name: String,
    attrValue: {},
    label: {}
  },
  computed: {
    inpuValue: {
      get: function() {
        return this.value
      },
      set: function(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    isChecked(item) {
      return this.inpuValue.indexOf(item) !== -1
    },
    handleChange(ev) {
      if (this.isChecked(this.label)) {
        this.inpuValue.push(this.label)
      } else {
        this.inpuValue.splice(this.inpuValue.indexOf(this.label), 1, this.label)
      }
      this.$emit('change', this.attrValue)
    }
  }
}
</script>

<style scoped>
</style>
